<template>
<el-row class="home" :gutter="20">
<el-col :span="8" style="margin-top: 20px;">
  <el-card style="width:700px;height:400px;" shadow="hover">
    <div class="user">
<img :src="getImageUrl('user')" class="user"/>
<div class="user-info">
<p style="font-size: 48px;">admin</p>
<p style="font-size: 20px;">超级管理员</p>

</div>

    </div>
    <div class="login-info">
<p style="font-size: 20px;">上次登录时间：<span style="font-size: 20px; font-weight: 800;">2025-08-03</span></p>
<p style="font-size: 20px;">上次登录地点：<span style="font-size: 20px;font-weight: 800;">广东</span></p>
    </div>
    <div >

    </div>
  </el-card>
  <el-card style="width:700px;height:260px;" shadow="hover" class="user-table">
  <el-table :data="tableData">
<el-table-column v-for="(value,key) in tableLabel" :key="key" :prop="key" :label="value">

</el-table-column>
  </el-table>
  </el-card>
</el-col>

</el-row>
</template>
<script setup>
import { ref,getCurrentInstance,onMounted} from 'vue'
import axios from 'axios'
const {proxy} =getCurrentInstance()

const getImageUrl = (user) => {
  return new URL(`../assets/images/${user}.png`,import.meta.url).href
}
const tableData=ref([])
const tableLabel = ref({
    name: "课程",
    todayBuy: "今日购买",
    monthBuy: "本月购买",
    totalBuy: "总购买",
})
const getTableData =async () => {
  const data = await proxy.$api.getTableData()
  tableData.value=data.tableData

}
onMounted(() => {
  getTableData()
})
</script>
<style scoped lang="less">
.home{
  height: 100%;
  overflow: hidden;
  .user{
display: flex;
align-items:center;
border-bottom: 1px solid #ccc;
margin-bottom:20px;
img{
  height: 150px;
  width:150px;
  border-radius: 50%;
  margin-right:40px;
}
  }
  .login-info{
    p{
      line-height:30px;
      font-size:14px;
      color:#999;
     
    }
  }
}
.user-table{
  margin-top:20px ;
}
</style>